<template>
  <div>
    <keep-alive>
      <component :is="com[type]"></component>
    </keep-alive>
    <button @click="handleClick">切换组件</button>
  </div>
</template>

<script lang="ts" setup>
import suba from "./keepalive-suba.vue";
import subb from "./keepalive-subb.vue";
import { shallowRef, ref, markRaw } from "vue";

let com = shallowRef({
  suba: suba,
  subb: subb,
});

const type = ref("suba");

let i = 0;

function handleClick() {
  if (i++ % 2 == 0) {
    type.value = "suba";
  } else {
    type.value = "subb";
  }
}
</script>

<style>
</style>